<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全文检索</title>
<link rel="stylesheet" type="text/css" href="/css/common.css" th:href="@{/css/common.css}" />
<link rel="stylesheet" type="text/css" href="/css/hh.css" th:href="@{/css/hh.css}" />
<link rel="stylesheet" type="text/css" href="/css/vh-style.css" th:href="@{/css/vh-style.css}" />
<link rel="stylesheet" type="text/css" href="/css/hw-style.css" th:href="@{/css/hw-style.css}" />
<link rel="stylesheet" type="text/css" href="/css/jsjg.css" th:href="@{/css/jsjg.css}" />
<script type="text/javascript" src="/lib/jquery.min.js" th:src="@{/lib/jquery.min.js}"></script>
</head>

<body>
	<!-- 中间部分 -->
	<div class="jsjg-cont mt-20" style="margin: 0 auto; width: 1200px;">
		<div class="jsjg-bar clearfix">
			<div class="jsjg-key lf">
				<span class="now">当前关键字：</span> <strong class="now-key" th:text="${DATA.search.searchword}"></strong>
			</div>
			<div class="jsjg-re lf">
				<span class="now">搜索到相关结果约</span> <strong class="res" th:text="${DATA.totalElements}"></strong>
				<span class="now">条结果，用时</span>
				<strong class="sp-time" th:text="${DATA.time}"></strong> 
				<span class="now">ms</span>
			</div>
			<div class="jsjg-sort rt">
				<button class="sort-btn rv" onclick="setOrderByScope('relevance');" id="xgd">相关度排序</button>
				<button class="sort-btn rm clearfix" onclick="setOrderByScope('docreltime');" id="sj">时间排序</button>
			</div>
		</div>
		<div class="jsjg-details clearfix">
			<div class="jsjg-lf lf">
				<div class="jsjg-nav">
					<div class="jsjg-item">
						<div class="fljg-title">
							<span class="fljs-te">时间范围</span>
						</div>
						<ul class="fljs-list" id="time">
							<li onClick="setTimeScope('all');" name="all">全部</li>
							<li onClick="setTimeScope('date');" name="date">一天内</li>
							<li onClick="setTimeScope('week');" name="week">一周内</li>
							<li onClick="setTimeScope('month');" name="month">一月内</li>
							<li onClick="setTimeScope('halfyear');" name="halfyear">半年内</li>
							<li onClick="setTimeScope('year');" name="year">一年内</li>
						</ul>
					</div>
					<div class="jsjg-item">
						<div class="fljg-title">
							<span class="fljs-te">查询范围</span>
						</div>
						<ul class="fljs-list" id="field">
							<li onClick="setFieldScope('');" name="doctitle,doccontent">全部</li>
							<li onClick="setFieldScope('doctitle');" name="doctitle">标题</li>
							<li onClick="setFieldScope('doccontent');" name="doccontent">正文</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="jsjg-rt rt" style="width: 970px;">
				<ul class="result-list" id="main_content">
					<li th:each="doc:${DATA.content}">
						<a target="_blank" href="" class="result-title" th:href="${doc.docpuburl}" th:utext="${doc.doctitle}">标题</a>
						<a target="_blank" href="" class="result-details" th:href="${doc.docpuburl}" th:utext="${doc.doccontent}">正文</a>
						<p class="result-about">
							<a target="_blank" href="" class="tt url mr"></a>
							<span class="tt">时间：</span> 
							<span class="tt mr" th:text="${doc.docreltime}"></span>
							<span class="tt">所在栏目：</span>
							<span class="tt" th:text="${doc.chnldesc}"></span>
						</p></li>
					<div class="news-page" id="page"></div>
					
<script src="/js/pageMe.js" th:src="@{/js/pageMe.js}"></script>
<style>
/* 外面盒子样式---自己定义 */
#page {
	margin: 20px 10px 20px 0;
	color: #666;
	text-align: center;
	font-size: 13px;
}
/* 页数按钮样式 */
#page button {
	display: inline-block;
	min-width: 30px;
	height: 28px;
	cursor: pointer;
	color: #666;
	font-size: 13px;
	line-height: 28px;
	background-color: #f9f9f9;
	border: 1px solid #dce0e0;
	text-align: center;
	margin: 0 4px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#firstPage, #lastPage, #nextPage, #prePage {
	width: 50px;
	color: #0073A9;
	border: 1px solid #0073A9
}

#nextPage, #prePage {
	width: 70px
}

#page .current {
	background-color: #666666;
	border-color: #666666;
	color: #FFF
}
/* 页面数量 */
.totalPages {
	margin: 0 10px
}

.totalPages span, .totalSize span {
	color: #0073A9;
	margin: 0 5px
}
/*button禁用*/
#page button:disabled {
	opacity: .5;
	cursor: no-drop
}
</style>
<script th:inline="javascript">
page=[[${DATA}]];
// pageMe.js 使用方法
if(page.totalElements!=0){
	$("#page").paging({
		pageNum: page.page.pageCur+1, // 当前页面
		totalNum: page.totalPages, // 总页码
		totalList: page.totalElements, // 记录总数量
		callback: function (num) { //回调函数
			setPageScope(num-1);
		}
	});
}else{
	$("#page").html("<h1>暂未搜到数据，请更换检索词试试</h1>");
}

function setFieldScope(type) {
	document.outlinesearchform.field.value = type;
	document.outlinesearchform.submit();
}

function setGroupScope(type) {
	document.outlinesearchform.groupid.value = type;
	document.outlinesearchform.submit();
}

function setTimeScope(type) {
	document.outlinesearchform.time.value = type;
	document.outlinesearchform.submit();
}

function setPageScope(type) {
	document.outlinesearchform.pageCur.value = type;
	document.outlinesearchform.submit();
}

function setOrderByScope(type) {
	if(type=="relevance")
		type="doctitle";
	if(type==document.outlinesearchform.sort.value||document.outlinesearchform.sort.value=="relevance"){
		var order=document.outlinesearchform.order.value;
		if(order==="asc")
			document.outlinesearchform.order.value="desc";
		if(order==="desc")
			document.outlinesearchform.order.value="asc";
	}
	
	document.outlinesearchform.sort.value = type;
	document.outlinesearchform.submit();
}

var fieldScope = page.search.field.toLowerCase();
var timeScope = page.search.time.toLowerCase();
var orderBy = page.page.sort.toLowerCase();

$("#time li").each(function(){
	if($(this).attr("name")===timeScope){
		$(this).addClass("cur");
	}
});

$("#field li").each(function(){
	if($(this).attr("name")===fieldScope){
		$(this).addClass("cur");
	}
});

if(orderBy=='relevance'||orderBy=='doctitle'){
	$("#xgd").addClass("cur");
}else if(orderBy=='-docreltime'||orderBy=='docreltime'){
	$("#sj").addClass("cur");
}
</script>

<form action="/search" method="get" name="outlinesearchform" th:action="@{/searchtest/search}">
	<input type="hidden" name="channelid" value="" th:value="${DATA.search.channelid}">
	<input type="hidden" name="type" value="" th:value="${DATA.search.type}">
	<input type="hidden" name="searchword" value="" th:value="${DATA.search.searchword}">
	<input type="hidden" name="time" value="" th:value="${DATA.search.time}">
	<input type="hidden" name="starttime" value="" th:value="${DATA.search.starttime}">
	<input type="hidden" name="endtime" value="" th:value="${DATA.search.endtime}">
	<input type="hidden" name="field" value="" th:value="${DATA.search.field}">
	<input type="hidden" name="pageCur" value="">
	<input type="hidden" name="groupid" value="" th:value="${DATA.search.groupid}">
	<input type="hidden" name="pageSize" value="" th:value="${DATA.page.pageSize}">
	<input type="hidden" name="order" value="" th:value="${DATA.page.order}">
	<input type="hidden" name="sort" value="" th:value="${DATA.page.sort}">
</form>

<style>
.sort-btn.rm {
	padding-left: 9px;
	padding-right: 8px;
	border: 1px solid #0062b1;
	border-radius: 5px;
	border-bottom-right-radius: 5px;
}
.fljs-list li.cur, .fljs-list li:hover {
    color: red;
}
span {
	vertical-align: unset;
}
</style>
</body>
</html>